{% stylesheet %}
.block_image {
  position: relative;
  max-width: var(--general_layout_width);
  text-align: center;
  margin: 0 auto;
  overflow: hidden;
  display: flex;
  justify-content: center;
  padding: 0 var(--full_container_padding);
}

@media screen and (max-width: 767px) {
  .block_image {
    padding-left: 15px;
    padding-right: 15px;
  }
}

.block_image .animation_btn {
  margin-top: 20px;
}

.block_image .animation_btn a {
  color: var(--color);
  background-color: var(--btn-bg);
  text-transform: uppercase;
  box-sizing: border-box;
  padding: 12px 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.25s;
  border-radius: var(--button_border_radius);
}

.block_image .animation_btn a span {
  display: inline-block;
  margin-right: 8px;
  transition: all 0.25s;
}

.block_image .animation_btn a svg {
  width: 17px;
  visibility: hidden;
  opacity: 0;
  transition: all 0.25s;
}

.block_image .animation_btn a span,
.block_image .animation_btn a svg {
  transform: translateX(1rem);
}

.block_image .animation_btn a:hover {
  background-color: #1c1a18;
}

.block_image .animation_btn a:hover svg {
  visibility: visible;
  transform: translateX(0px);
  opacity: 1;
}

.block_image .animation_btn a:hover span {
  transform: translateX(0);
}

.block_image .container_wrapper {
  padding: 80px;
}

.block_image-fill .container_wrapper {
  padding: 0px;
}

.block_image-fill {
  width: 100% !important;
  max-width: 100%;
  padding: 0 !important;
}

.block_image a {
  width: 100%;
}

.image-size-big img {
  height: 800px;
  width: 100%;
  object-fit: cover;
}

.image-size-middle img {
  height: 560px;
  width: 100%;
  object-fit: cover;
}

.image-size-small img {
  height: 300px;
  width: 100%;
  object-fit: cover;
}

.image-size-middle .content-describe {
  margin-top: 20px !important;
}

.image-size-middle .content-btn {
  margin-top: 30px !important;
}

.image-size-small .content-describe {
  margin-top: 10px !important;
}

.image-size-small .content-btn {
  margin-top: 20px !important;
}

.image-size-auto img {
  height: auto;
  width: 100%;
  object-fit: cover;
}

.block_image .block_image-mask {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 100;
}

.block_image-fill .block_image-content {
  max-width: 1200px !important;
  box-sizing: border-box;
  left: 50%;
  transform: translateX(-50%);
}

.block_image .block_image-content {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 110;
  box-sizing: border-box;
}

.block_image .content-position-center {
  align-items: center;
  text-align: center;
}

.block_image .content-position-center .content-describe {
  max-width: 800px;
}

.block_image .content-position-left {
  align-items: flex-start;
  text-align: left;
}

.block_image .content-position-left .content-describe {
  max-width: 380px;
}

.block_image .content-position-right {
  align-items: flex-end;
  text-align: right;
}

.block_image .content-align-right .content-describe {
  max-width: 380px;
}

.block_image .content-title {
  font-weight: 300;
  color: #ffffff;
  color: var(--title_color);
  font-family: var(--title_font_family);
  font-style: var(--title_font_style);
  font-weight: var(--title_font_weigth);
  letter-spacing: var(--title_letter_spacing);
}

.block_image .content-describe {
  margin-top: 30px;
  font-size: 16px;
  line-height: 24px;
  color: #fff;
}

.block_image .content-align-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
}

.block_image .content-align-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.block_image .content-align-left {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
}

.block_image .block-image-mobile {
  display: none;
}

@media screen and (max-width: 768px) {
  .block_image .slide-item .slide-item-des {
    font-size: 14px;
  }
  .block_image.image-size-big img {
    height: 600px;
  }
  .block_image.image-size-middle img {
    height: 400px;
  }
  .block_image.image-size-samll img {
    height: 320px;
  }
  .block_image .block_image-content {
    padding: 0 15px;
  }
}

@media screen and (max-width: 767px) {
  .block_slides .block-image-mobile {
    display: block;
  }
  .block_slides .block-image-pc {
    display: none;
  }
  .block_image.image-size-big img {
    height: 100vh;
  }
  .block_image.image-size-middle img {
    height: 70vh;
  }
  .block_image.image-size-samll img {
    height: 50vh;
  }
  .block_image .block-image-mobile {
    display: block;
  }
  .block_image .block-image-pc {
    display: none;
  }
}

@media screen and (min-width: 767px) and (max-width: 1200px) {
  .block_image-fill .block_image-content {
    padding: 0 30px;
  }
}

{% endstylesheet %}
{% assign defaultImageEmpty = 'banner@2x.png' | public_asset_abs_url %}
{% assign data = section.settings %}

<div
  class="block_image {% if section.settings.is_full %}block_image-fill{% endif %} image-size-{{ section.settings.height }}">
  <div style="width: 100%;position: relative;">
		{% include 'lazy_img',class:"block-image-pc", file_type:"banner", src:section.settings.web_image.src,  alt:section.settings.web_image.alt %}
		{% assign mobile_image_src = section.settings.mobile_image.src | default:section.settings.web_image.src %}
		{% include 'lazy_img',class:"block-image-mobile", file_type:"banner", src:mobile_image_src,  alt:section.settings.web_image.alt %}

    <div class="block_image-mask"
      style="background-color:{{ section.settings.mask_color }};opacity: {{ section.settings.mask_transparent | divided_by : 100  }};">
    </div>

    <div
      class="slide-content-{{ block_id | default : section.block_id }} block_image-content content-size-{{ section.settings.text_size }}  content-position-{{ section.settings.text_position }} {% if section.settings.is_fill %}full_container_wrapper{% else %}container_wrapper{% endif %}">
      <div class="content-align-{{ section.settings.text_position }}">
        {% if section.settings.title != '' %}
        <h2 class="content-title general_title-color" style="color:{{ section.settings.title_color }}">{{ section.settings.title }}
        </h2>
        {% endif %}
        {% if section.settings.content != '' %}
        <div class="content-describe" style="color:{{ section.settings.content_color }}">{{ section.settings.content }}
        </div>
        {% endif %}
        {% if section.settings.button_text %}
        <div class="animation_btn"
          style="--color: {{data.button_font_color}};--btn-bg: {{data.button_background_color}}">
          <a
            href="{% if section.settings.slide_path.url %}{{ section.settings.slide_path.url | append: '?data_from=' | append: data_from }}{% else %}javascript:;{%endif%}">
            <span>{{section.settings.button_text}}</span>
            <svg viewBox="0 0 22 14" fill="none" aria-hidden="true" focusable="false" role="presentation"
              class="icon icon-button-arrow" xmlns="http://www.w3.org/2000/svg">
              <path
                d="M15.1712 1.15214L14.9895 0.98149L14.8183 1.16262L14.3286 1.68074L14.1561 1.86323L14.3393 2.03491L18.9951 6.39689L1 6.3969L0.75 6.3969L0.75 6.6469L0.75 7.35665L0.75 7.60665L1 7.60665L18.9955 7.60665L14.3393 11.9722L14.1549 12.1451L14.3298 12.3276L14.8195 12.8386L14.9907 13.0173L15.1711 12.8479L21.2041 7.18404L21.3981 7.00183L21.2041 6.81956L15.1712 1.15214Z"
                fill-rule="evenodd" clip-rule="evenodd" fill="currentColor"></path>
            </svg>
          </a>
        </div>
        {% endif %}
      </div>
    </div>
	{%- if section.settings.button_text == '' -%}
        <a href="{% if section.settings.slide_path.url %}{{ section.settings.slide_path.url | append: '?data_from=' | append: data_from }}{% else %}javascript:;{%endif%}" style="position: absolute;top: 0;left: 0;right: 0;bottom: 0;z-index:120"></a>
    {%- endif -%}
  </div>

</div>
{% schema %}
{
	"tag": "section",
	"class": "block_image",
	"is_global": false,
	"name": {
		"zh_CN": "单图",
		"en_US": "Single image"
	},
	"max_blocks": "",
	"settings": [
		{
			"type": "card_header",
			"label": {
				"zh_CN": "设置",
				"en_US": "Settings"
			}
		},
		{
			"type": "card_image",
			"label": {
				"zh_CN": "pc图片",
				"en_US": "PC image"
			},
			"default": {
				"src": "",
				"alt": ""
			},
			"info": {
				"zh_CN": "尺寸建议：大-1920*800px，中-1920*600，小-1920*420",
				"en_US": "Suggested size: large -1920*800px, medium -1920*600, small -1920*420"
			},
			"id": "web_image"
		},
		{
			"type": "card_image",
			"label": {
				"zh_CN": "移动端图片",
				"en_US": "Mobile image"
			},
			"default": {
				"src": "",
				"alt": ""
			},
			"info": {
				"zh_CN": "尺寸建议1242*2000px",
				"en_US": "Size suggested 1242*2000px"
			},
			"id": "mobile_image"
		},
		{
			"type": "card_page_link",
			"label": {
				"zh_CN": "跳转链接",
				"en_US": "Jump links"
			},
			"id": "slide_path"
		},
		{
			"type": "card_select",
			"id": "height",
			"option": [
				{
					"label": {
						"zh_CN": "大",
						"en_US": "Big"
					},
					"value": "big"
				},
				{
					"label": {
						"zh_CN": "中",
						"en_US": "Middle"
					},
					"value": "middle"
				},
				{
					"label": {
						"zh_CN": "小",
						"en_US": "Small"
					},
					"value": "small"
				},
				{
					"label": {
						"zh_CN": "自适应",
						"en_US": "Adaptive"
					},
					"value": "auto"
				}
			],
			"label": {
				"zh_CN": "图片高度",
				"en_US": "Image height"
			},
			"default": "middle"
		},
		{
			"type": "card_switch",
			"id": "is_full",
			"label": {
				"zh_CN": "宽度铺满",
				"en_US": "Spread the width"
			},
			"default": true
		},
		{
			"type": "card_slider",
			"id": "mask_transparent",
			"max": "100",
			"min": 0,
			"label": {
				"zh_CN": "蒙层不透明度",
				"en_US": "Mask opacity"
			},
			"default": "40"
		},
		{
			"type": "card_color",
			"id": "mask_color",
			"label": {
				"zh_CN": "蒙层颜色",
				"en_US": "Mask color"
			},
			"default": "#000"
		},
		{
			"type": "card_header",
			"label": {
				"zh_CN": "内容",
				"en_US": "Content"
			}
		},
		{
			"type": "card_input",
			"id": "title",
			"label": {
				"zh_CN": "标题",
				"en_US": "Title"
			},
			"default": "Image with text overlay"
		},
		{
			"type": "card_text_editor",
			"label": {
				"zh_CN": "简短描述",
				"en_US": "Short description"
			},
			"default": "Image with text overlay",
			"id": "content"
		},
		{
			"type": "card_select",
			"id": "text_position",
			"label": {
				"zh_CN": "标题按钮位置",
				"en_US": "Title button location"
			},
			"option": [
				{
					"label": {
						"zh_CN": "居左",
						"en_US": "To the left"
					},
					"value": "left"
				},
				{
					"label": {
						"zh_CN": "居中",
						"en_US": "In the center"
					},
					"value": "center"
				},
				{
					"label": {
						"zh_CN": "居右",
						"en_US": "To the right"
					},
					"value": "right"
				}
			],
			"default": "left"
		},
		{
			"type": "card_color",
			"id": "title_color",
			"label": {
				"zh_CN": "标题颜色",
				"en_US": "Header color"
			},
			"default": "#fff"
		},
		{
			"type": "card_color",
			"id": "content_color",
			"label": {
				"zh_CN": "内容颜色",
				"en_US": "Content color"
			},
			"default": "#fff"
		},
		{
			"type": "card_header",
			"label": {
				"zh_CN": "按钮",
				"en_US": "Button"
			}
		},
		{
			"type": "card_input",
			"id": "button_text",
			"label": {
				"zh_CN": "按钮标题",
				"en_US": "Button title"
			},
			"default": "show now"
		},
		{
			"type": "card_color",
			"id": "button_background_color",
			"label": {
				"zh_CN": "按钮背景",
				"en_US": "Button background"
			},
			"default": "#000"
		},
		{
			"type": "card_color",
			"id": "button_font_color",
			"label": {
				"zh_CN": "按钮文字",
				"en_US": "Button text"
			},
			"default": "#fff"
		}
	],
	"blocks": [],
	"default": {
		"settings": {
			"web_image": {
				"src": "",
				"alt": ""
			},
			"mobile_image": {
				"src": "",
				"alt": ""
			},
			"slide_path": {
				"type": "",
				"title": "",
				"url": ""
			},
			"height": "middle",
			"is_full": false,
			"mask_transparent": "20",
			"mask_color": "#000",
			"title": "Image with text overlay",
			"content": "Use overlay text to give your customers insight into your brand. Select imagery and text that relates to your style and story",
			"text_position": "center",
			"text_align": "center",
			"text_size": "big",
			"title_color": "#fff",
			"content_color": "#fff",
			"button_text": "SHOP ALL",
			"button_background_color": "#1D1F21",
			"button_font_color": "#fff"
		},
		"blocks": []
	},
	"icon": "icon-dantu"
}
{% endschema %}